<template>
  <header class="weather-header">
    <nav class="container">
      <router-link to="/weather">
        <div class="item-left">
          <i class="iconfont icon-sun"></i>
          <p>天气预报</p>
        </div>
      </router-link>
      <div class="item-center">
        <h4>{{ currentWeather.city }}</h4>
        <span
          >实时天气:&nbsp;&nbsp;{{ currentWeather.weather }}
          {{ currentWeather.temperature }}°C</span
        >
        <span>{{ currentWeather.winddirection }}风{{ currentWeather.windpower }}级</span>
      </div>
      <div class="item-right">
        <i class="iconfont icon-icon_about" @click="handleClick"></i>
        <i
          class="iconfont icon-add"
          v-if="isSearchPageAddVisible"
          @click="handleLocalStorageData"
        ></i>
      </div>
    </nav>
  </header>
  <ModalView v-if="isModalVisible"></ModalView>
</template>

<script setup>
import { onMounted } from 'vue';
import { storeToRefs } from 'pinia';

import { useWeatherStore } from '@/stores/weatherStore.js';

import ModalView from '@/components/ModalView.vue';

const {
  searchCity,
  searchCityAdcode,
  searchCityCurrentWeather,
  isModalVisible,
  isSearchPageAddVisible,
  localStorageData,
} = storeToRefs(useWeatherStore());

const props = defineProps({
  currentWeather: {
    type: Object,
    default: () => ({}),
    required: true,
  },
});

const handleClick = () => {
  // console.log(isModalVisible.value);
  isModalVisible.value = true;
  // console.log(isModalVisible.value);
};

const handleLocalStorageData = () => {
  localStorageData.value.push({
    city: searchCity.value,
    adcode: searchCityAdcode.value,
    temperature: searchCityCurrentWeather.value.temperature,
  });
  localStorage.setItem('localStorageData', JSON.stringify(localStorageData.value));
  isSearchPageAddVisible.value = false;
};

onMounted(() => {
  const storedData = localStorage.getItem('localStorageData');
  if (storedData) {
    localStorageData.value = JSON.parse(storedData);
    isSearchPageAddVisible.value = localStorageData.value.some(
      item => item.city === searchCity.value
    )
      ? false
      : true;
  } else {
    isSearchPageAddVisible.value = true;
  }
});
</script>

<style lang="scss" scoped>
// 引入字体图标
@import '@/assets/iconfont/iconfont.css';

.weather-header {
  position: sticky;
  top: 0;
  background-color: #00668a;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  z-index: 10;
  .container {
    display: flex;
    gap: 1rem;
    width: 100%;
    height: 80px;
    // max-width: 1536px;
    max-width: 100%;
    margin: 0 auto;
    padding-right: 10rem;
    padding-left: 10rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    align-items: center;
    color: #fff;
    text-decoration: none;
    a {
      text-decoration: none;
      .item-left {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        i,
        p {
          color: #fff;
          font-size: 1.5rem;
          font-weight: 500;
          font-family: 'Font Awesome 6 Free';
          line-height: 2rem;
        }
      }
    }
    .item-center {
      display: flex;
      align-items: center;
      gap: 1rem;
      h4 {
        margin: 0;
        font-size: 1.125rem;
        line-height: 1.75rem;
      }
      span {
        font-size: 0.875rem;
        line-height: 1.25rem;
      }
    }
    .item-right {
      display: flex;
      flex: 1 1 0%;
      justify-content: flex-end;
      gap: 0.75rem;
      align-items: center;
      i {
        cursor: pointer;
        &:nth-child(1) {
          width: 1.4rem;
          height: 1.4rem;
          background: #fff;
          color: #00668a;
          font-size: 0.7rem;
          text-align: center;
          line-height: 1.4rem;
          transition: all 1s;
          border: 1px solid #00668a;
          border-radius: 50%;
          transition: all 1s;
        }
        &:nth-child(1):hover {
          color: #00668a;
          background: #004e71;
        }
        &:nth-child(2) {
          font-size: 1rem;
          line-height: 1rem;
          transition: all 0.15s;
        }
        &:nth-child(2):hover {
          color: #004e71;
        }
        &:nth-child(2).invisible {
          display: none;
        }
      }
    }
  }
}
</style>
